<template>
	<div class="licenceView">
		<div class="mainContent">
			<div class="logoBox">
				<img src="../../assets/icon/licence1.png" alt="" />
			</div>
			<div class="formBox">
				<div class="title">Licence授权</div>
				<div class="mainForm">
					<div class="formRowInfo">
						<span class="titleSpan">本机注册码</span>
						<span class="textSpan">{{ licenceCode }}</span>
					</div>
					<div class="formRowInfo">
						<span class="titleSpan">上传文件</span>
						<span class="fileUploadBox">
							<el-upload
								ref="licenceUpload"
								class="upload-demo"
								:action="actionStr"
								multiple
								:limit="1"
								:show-file-list="false"
								:on-change="fileChange"
								:on-progress="fileProgress"
							>
								<wj-Button type="primary" @click="clearUploadFiles">选择文件</wj-Button>
							</el-upload>
						</span>
					</div>
					<div class="formRowInfo">
						<span class="titleSpan">文件名称</span>
						<span class="textSpan">{{ fileText }}</span>
					</div>
					<div class="formRowInfo">
						<span class="titleSpan">上传进度</span>
						<span class="textSpan">{{ loadProgress < 100 ? (loadProgress + '%，正在上传文件') : (loadProgress + '%，文件上传完成') }}</span>
					</div>
				</div>
				<div class="btns">
					<wj-Button type="info" @click="backPrev">返回</wj-Button>
					<wj-Button type="middlestate" @click="submitLicence">提交</wj-Button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import httpUrl from "@/utils/request/httpUrl";
import { licence_code, licence_file } from "@/utils/request/api.js";
export default {
	name: "Licence",
	data() {
		return {
			fileText: "------", // 文件上传  文件名
			loadProgress: 0, // 上传进度百分比
			actionStr:
				process.env.NODE_ENV == "development"
					? httpUrl.devUrl + "/uploadLicenseFile"
					: process.env.NODE_ENV == "production"
					? httpUrl.prodUrl + "/uploadLicenseFile"
					: "",
			licenceCode: "------", // 本机注册码
			submitStatusAndFile: {
				submitStatus: false, // 是否已经100%
				file: null, // 文件列表中的文件
			},
			redirectPath: undefined, // 将要跳转的路由
		};
	},
	created() {},
	mounted() {
		console.log(this.$route.params);
		this.redirectPath = (this.$route.params.redirect ? this.$route.params.redirect : undefined);
		this.getLicenceCode();
	},
	methods: {
		// 获取注册码
		getLicenceCode() {
			licence_code().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.licenceCode = res.data;
				} else {
					this.$msg.error("本机注册码获取失败！");
				}
			});
		},
		// 文件上传  清空文件列表
		clearUploadFiles() {
			this.$refs.licenceUpload.clearFiles();
		},
		// 文件上传  进度条
		fileProgress(event, file, fileList) {
			console.log(event);
			console.log(file);
			console.log(fileList);
			this.loadProgress = parseInt(event.percent);
		},
		// 文件上传  文件发生改变
		fileChange(file, fileList) {
			console.log(file);
			console.log(fileList);
			this.fileText = file.name;
			if (file.status == "success" && file.percentage == 100) {
				this.$msg.success("文件已上传列表，请进行授权操作！");
				this.submitStatusAndFile.submitStatus = true;
				this.submitStatusAndFile.file = file;
			}
		},
		// 文件上传  接口调用
		uploadLicenceFile(file) {
			console.log(file);
			licence_file({
				file: file.raw,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("Licence授权验证成功，请继续操作！");
					if (this.redirectPath) {
						setTimeout(() => {
							this.$router.push(
								{ path: this.redirectPath },
								(onComplete) => {
									console.log(onComplete);
								},
								(onabort) => {
									console.log(onabort);
								}
							);
						}, 1000);
					} else {
						this.$router.push(
							{ name: "Login" },
							(onComplete) => {
								console.log(onComplete);
							},
							(onabort) => {
								console.log(onabort);
							}
						);
					}
				} else {
					this.$msg.error("Licence授权验证失败，请重新获取授权文件！");
				}
			});
		},
		// 返回
		backPrev() {
			this.$refs.licenceUpload.clearFiles();
			this.$router.push(
				{ name: "Login" },
				(onComplete) => {
					console.log(onComplete);
				},
				(onabort) => {
					console.log(onabort);
				}
			);
		},
		// 提交
		submitLicence() {
			if (this.submitStatusAndFile.submitStatus) {
				this.uploadLicenceFile(this.submitStatusAndFile.file);
			} else {
				this.$msg.warning("Licence文件正在上传，请稍等！");
			}
		},
	},
};
</script>
<style lang="less" scoped>
.licenceView {
	width: 100%;
	height: 100%;
	background-image: url("../../assets/icon/backgroundColor.png");
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.mainContent {
		width: 800px;
		max-width: 60%;
		height: 398px;
		background: #eeeeee;
		border-radius: 12px;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.logoBox {
			width: 30%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			img {
				width: 128px;
				height: 128px;
			}
		}

		.formBox {
			width: 80%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			.title {
				width: 90%;
				font-size: 24px;
				font-weight: 600;
				text-align: right;
				margin: 18px auto;
			}
			.mainForm {
				width: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.formRowInfo {
					width: 80%;
					height: 58px;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					span {
						display: inline-block;
						font-size: 16px;
					}
					span.titleSpan {
						width: 80px;
						height: 48px;
						line-height: 48px;
						color: #606266;
						font-weight: 600;
						margin-right: 18px;
					}
					span.textSpan {
						height: 48px;
						line-height: 48px;
					}
					span.fileUploadBox {
						height: 48px;
						line-height: 48px;
						[class*="wj-button-"] {
							font-size: 14px;
							padding: 8px 18px;
						}
					}
				}
			}
			.btns {
				width: 100%;
				height: 68px;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				[class*="wj-button-"] {
					font-size: 14px;
					padding: 8px 18px;
					margin: 0 12px;
				}
			}
		}
	}
}
</style>
